<template>
  <div>
    <TestQuestionOption 
      ref="testQuestionRef" 
      :video-id="videoId"
      @answer-change="handleAnswerChange"
    />
    <!-- <Test ref="characterRef"/>
    <button @click="checkAnswer">检查答案</button> -->



    <!-- 答题统计展示区域 -->
    <a-card style="margin: 24px; position: sticky; bottom: 0; z-index: 1">
      <div style="display: flex; justify-content: space-between; align-items: center">
        <div>
          <span style="margin-right: 16px">已答: {{ answeredCount }}/{{ totalCount }}</span>
          <span>正确: {{ correctCount }}/{{ answeredCount }}</span>
        </div>
        <div>
          <span style="font-weight: bold; margin-right: 16px">
            正确率: {{ accuracy }}%
          </span>
          <a-button type="primary" @click="handleComplete">完成</a-button>
        </div>
      </div>
    </a-card>

    <!-- 答题结果弹窗 -->
    <a-modal 
      v-model:visible="showResultModal" 
      title="答题结果" 
      @ok="handleModalOk"
      :okText="'保存错题'"
      :cancelButtonProps="{ style: { display: 'none' } }"
    >
      <div style="text-align: center; font-size: 16px">
        <p>答题完成!</p>
        <p>共 {{ totalCount }} 题，答对 {{ correctCount }} 题</p>
        <p>正确率: {{ accuracy }}%</p>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import TestQuestionOption from '../questionByAi/TestQuestionOption.vue'
import Test  from '../questionByAi/Test.vue'
import{add2} from '@/api/bizQuestionMistakeController'
const router = useRouter()
const testQuestionRef = ref(null)

const{videoId}=defineProps({
  videoId: {
    type: Number,
    required: true,
  },
})

// 答题统计
const answeredCount = ref(0)
const correctCount = ref(0)
const totalCount = ref(0)
const showResultModal = ref(false)

// 计算正确率
const accuracy = computed(() => {
  return answeredCount.value > 0 
    ? ((correctCount.value / answeredCount.value) * 100).toFixed(2)
    : '0.00'
})

// 处理单个答案变化
function handleAnswerChange(answerInfo) {
  updateAnswerStats()
}

// 更新答题统计
function updateAnswerStats() {
  if (!testQuestionRef.value) return
  
  const allQuestions = testQuestionRef.value.getAllQuestions()
  totalCount.value = allQuestions.length
  answeredCount.value = allQuestions.filter(q => q.userAnswer !== '').length
  correctCount.value = allQuestions.filter(q => q.isCorrect).length
}

// 完成答题
async function handleComplete() {
  if (!testQuestionRef.value) return
  
  // 检查是否所有问题都已回答
  if (!testQuestionRef.value.isAllAnswered()) {
    alert('请回答所有问题后再提交')
    return
  }
  
  // 更新统计数据
  updateAnswerStats()
  
  // 显示结果弹窗
  showResultModal.value = true

  const checkAnswer = () => {
  // 添加答题逻辑
  //const isCorrect = userAnswer === correctAnswer;
  
  // 调用子组件的方法
  characterRef.value.answerQuestion(true);
};
}

// 处理弹窗确认
async function handleModalOk() {
   const allQuestions = testQuestionRef.value.getAllQuestions()
  const userId = Number(localStorage.getItem('userId'))
  const wrongQuestions = allQuestions.filter(q => q.userAnswer !== '' && q.userAnswer !== q.answer)
  // 在这里提交错题到服务器
for (const item of wrongQuestions) {
    const body = {
      userId: userId,
      questionId: item.id,
      questionType: item.questionType,
      questionTags: item.questionTags ?? null,
    }

    try {
      await add2(body)
    } catch (e) {
      console.error('添加错题失败:', e)
    }
  }
  showResultModal.value = false
}
onMounted(() => {
   //console.log('videoID', videoId); 
})
</script>